<!--
 * @Author: wangzm
 * @Date: 2020-01-19 16:47:13
 * @LastEditors: wangzm
 * @LastEditTime: 2020-03-11 14:28:32
 * @Description: webview
 -->
<template>
  <base-page-view class-name="page-container vip-container">
    <!-- <web-view v-if="showPage" :webview-styles="webviewStyles" :src="src" @message="getMsg"></web-view> -->
    <block v-if="!showPage">
      <templateCom
        :activity-data="activityData"
        :page-style="pageStyle"
        :is-empt="isEmpty"
        :page-loading="pageLoading"
        :scroll-top="scrollTop"
        :show-footer-bar="showFooterBar"
        :activity-config="activityConfig" />
    </block>
  </base-page-view>
</template>

<script>
import { mapState } from 'vuex'
import templateCom from '@/components/templateCom/index'
import { getVipUrl } from '@/apis/Promotion'
import { h5NavigateTo } from '@/utils/navigateTo'
import { getQueryString } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    templateCom
  },
  data() {
    return {
      id: '',
      isEmpty: false,
      pageLoading: true,
      pageStyle: '',
      scrollTop: 0,
      screenHeight: 667,
      activityConfig: {
        name: ''
      },
      activityData: {
        modules: []
      },
      showFooterBar: false,
      webviewStyles: {
        progress: {
          color: '#FF3333'
        }
      },
      src: '',
      showPage: false,
      shareOption: {
        title: '', // 分享标题
        imgUrl: '', // 分享图标
        desc: '' // 分享描述
      }
    }
  },
  computed: {
    ...mapState([
      'token'
    ])
  },
  created() {
    const res = uni.getSystemInfoSync()
    this.screenHeight = res.screenHeight
  },
  onLoad() {
    this.showPage = false
    this.pageLoading = true
    this.isEmpty = false
    this.activityConfig = { name: '' }
    this.activityData = { modules: [] }
    this.initData()
    this.initShareMenu()
  },
  onPullDownRefresh() {
    this.isEmpty = false
    this.showPage = false
    this.initData()
  },
  onShareAppMessage(res) {
    if (!this.showPage) {
      const data = {}
      if (this.activityData.share_title) {
        data.title = this.activityData.share_title
      }
      if (this.activityData.share_icon) {
        data.imageUrl = this.activityData.share_icon
      }
      return this.$queryShareOption(res, data)
    } else {
      // webview的
      const shareOption = {}
      if (this.shareOption.title) {
        shareOption.title = this.shareOption.title
      }
      if (this.shareOption.imgUrl) {
        shareOption.imageUrl = this.shareOption.imgUrl
      }
      if (this.shareOption.desc) {
        shareOption.desc = this.shareOption.desc
      }
      return this.$queryShareOption(res, shareOption)
    }
  },
  onPageScroll(e) {
    const screenToShow = this.activityData.footer_tabs ? this.activityData.footer_tabs.screenToShow : 0
    this.scrollTop = e.scrollTop
    if (screenToShow) {
      this.showFooterBar = e.scrollTop > screenToShow * this.screenHeight
    }
  },
  methods: {
    initData() {
      getVipUrl().then(res => {
        if (res.success) {
          const info = res.data
          this.src = info.vip_link
          if (this.src.indexOf('pagesDetail/template/index') > -1 || this.src.indexOf('detail/activity') > -1) {
            this.id = getQueryString('id', this.src)
            if (this.id) {
              this.fetchData()
            }
          } else {
            h5NavigateTo(this.src, 'redirectTo')
            this.showPage = true
          }
        }
      })
    },
    getMsg(e) {
      const data = e.detail.data || []
      if (data.length > 1) {
        this.shareOption = data[data.length - 2]
      }/*  else if (data.length === 1) {
        this.shareOption = data[0]
      } */
      console.log(e.detail.data, 'message')
    },
    // 获取活动信息
    async fetchData() {
      const res = await this.$api.homeApi.getActivity({
        activity_id: decodeURIComponent(this.id)
      })
      if (res.success && res.data) {
        if (res.data.activity) {
          this.activityData = JSON.parse(res.data.activity.comment || '{ modules: [] }')
          delete res.data.activity.comment
          this.activityConfig = res.data.activity
          if (new Date(this.activityConfig.end_time * 1000) < new Date()) {
            this.$gc.$message({
              title: '提示',
              content: '活动已结束',
              confirmColor: '#FF759F', // 确认按钮颜色
              confirmText: '确定',
              showCancel: false,
              align: 'center'
            })
          }
          this.setBg()
          this.initShareMenu()
          this.setTitle(this.activityConfig.name)
        } else {
          this.isEmpty = true
        }
      }

      setTimeout(() => {
        this.pageLoading = false
        uni.stopPullDownRefresh()
      }, 10)
    },
    // 设置背景
    setBg() {
      if (this.activityData.background) {
        /* uni.setBackgroundColor({
          backgroundColor: this.activityData.background
        }) */

        this.pageStyle = `background: ${this.activityData.background}${this.activityData.background_image ? ` url(${this.activityData.background_image}) no-repeat cover` : ''};`
        console.log(this.pageStyle)
      }
    },
    // 设置标题
    setTitle(title) {
      uni.setNavigationBarTitle({
        title: title
      })
    },
    // 分享菜单初始化
    initShareMenu() {
      // #ifdef MP-WEIXIN
      if (this.activityConfig.share_login_state && !this.token) {
        uni.hideShareMenu()
      } else {
        uni.showShareMenu()
      }
      // #endif
    }
  }
}
</script>
